<template>
  <div class="tabs">
    <van-tabs v-model="active" class="vantabs" swipeable sticky color="#1b89fa">
      <van-tab title="疫情总览">
        <Case-information></Case-information>
      </van-tab>
      <van-tab title="本地疫情">
        <Location></Location>
      </van-tab>
      <van-tab title="病例分布">
        <Case-distribution></Case-distribution>
      </van-tab>
      <van-tab title="路程查询">
        <Distance-inquiry></Distance-inquiry>
      </van-tab>
      <van-tab title="实时播报">
        <Timeline></Timeline>
      </van-tab>
      <van-tab title="相关直播">
        <Live-broadcast></Live-broadcast>
      </van-tab>
      <van-tab title="疫情辟谣">
        <Rumour></Rumour>
      </van-tab>

      <!-- <van-tab title="查询工具">
        <Tools></Tools>
      </van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
import CaseInformation from '@/components/Index-Container/case-information/index'
import LiveBroadcast from '@/components/Index-Container/live-broadcast/index'
import Location from '@/components/Index-Container/localcase/index'
import Rumour from '@/components/Index-Container/rumour/index'
import DistanceInquiry from '@/components/Index-Container/distance-inquiry/index'
import CaseDistribution from '@/components/Index-Container/case-distribution/index'
import Timeline from '@/components/Index-Container/real-timeline/index'
// import Tools from '@/components/Tools'

export default {
  name: 'Tabs',
  components: {
    CaseInformation,
    Rumour,
    DistanceInquiry,
    CaseDistribution,
    Location,
    Timeline,
    LiveBroadcast
  },
  data() {
    return {
      active: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
  height: 100%;

  .vantabs {
    width: 100%;
    height: 100%;
  }
}
</style>
